<template>
    <view class="fate-index">
        <!-- 综合指数区域 -->
        <view class="comprehensive-index">
            <image mode="aspectFit" class="index-bg" :src="index_bg_image" />
            <tm-text _class="text-weight-b" :font-size="42" color="#fff"
                :label="fateInfo?.summary_star || ''"></tm-text>
            <tm-text :font-size="24" color="#fff" label="综合得分"></tm-text>
        </view>

        <view class="fate-index-container">
            <view v-for="(item, index) in fateIndexList" :key="index" class="progress">
                <tm-text _class="text-weight-b" :font-size="24" color="#A37C3D" :label="item.name"></tm-text>
                <tm-progress :linePadding="0" :height="16" class="mx-12" :width="270"
                    :percent="item.value * 20"></tm-progress>
                <tm-text _class="text-weight-b" :font-size="20" color="#B8A27A"
                    :label="item.value ? `${item.value * 20}分` : ''"></tm-text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { isEmpty } from "lodash";
import { ref, computed } from "vue";
import index_bg_image from '/static/assets/images/index/index-bg.png'
const props = defineProps({
    fateInfo: {
        type: Object,
        default: () => ({})
    }
})
const fateIndexList = computed(() => {
    if (isEmpty(props.fateInfo)) return [];
    return [
        { name: '爱情', value: props.fateInfo.love_star },
        { name: '事业', value: props.fateInfo.work_star },
        { name: '财富', value: props.fateInfo.money_star },
        { name: '健康', value: props.fateInfo.health_star },
    ]
})
</script>
<style lang="less" scoped>
.fate-index {
    display: flex;
    align-items: end;
    margin-bottom: 68rpx;
}

.comprehensive-index {
    transform: translateY(-10rpx);
    width: 172rpx;
    height: 172rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    margin-right: 24rpx;

    .index-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
    }
}

.fate-index-container {
    .title {
        font-weight: bold;
        font-size: 28rpx;
        color: #A37C3D;
        margin-bottom: 24rpx;
    }

    .progress {
        display: flex;
        align-items: center;

        &:not(:last-child) {
            margin-bottom: 16rpx;
        }
    }
}
</style>